<div class="panel panel-default">
    <div class="panel-heading font-bold">wf-form-block</div>
    <div class="panel-body">
        <form [formGroup]="wfFormGroup" (ngSubmit)="onSubmit()" class="form-validation">
            <wf-form-block>
                <wf-form-inputbox [col]="blockCol" [control]="userName" [label]="userLabel" [inputType]="inputType"></wf-form-inputbox>
                <wf-form-inputbox [col]="4" [control]="userName"></wf-form-inputbox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-selectbox [col]="blockCol" [control]="userName" [label]="selLabel" [options]="selOption"></wf-form-selectbox>
                <wf-form-selectbox [col]="blockCol" [control]="userName" [label]="userLabel" [options]="selectOp"></wf-form-selectbox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-textareabox [col]="blockCol" [control]="userName" [label]="textareaLa" [rows]="wfrows" [cols]="wfcols" [placeholder]="pla"></wf-form-textareabox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-botton [col]="blockCol" [classes]="classes" [button]="btnname" [btnicon]="btnicon" [disabled]="disabled"></wf-form-botton>
            </wf-form-block>
            <wf-form-block>
            	<wf-form-checkbox [className]="'checkbox'" [label]="checkLabel" [control]="userName"></wf-form-checkbox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-checkbox [className]="'checkbox'" [label]="checkLabel+ '~checked'" [control]="userName" checked="checked"></wf-form-checkbox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-checkbox [className]="'checkbox'" [label]="checkLabel+ '~disabled'" [control]="userName" disabled="disabled"></wf-form-checkbox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-checkbox [className]="'checkbox'" [label]="checkLabel+ '~disabled and checked'" [control]="userName" disabled="disabled" checked="checked"></wf-form-checkbox>
            </wf-form-block>
            <wf-form-block>
            	<wf-form-checkbox [className]="'checkbox'" [label]="checkOptions+1" [control]="userName" name="checkboxs" value="1"></wf-form-checkbox>
            	<wf-form-checkbox [className]="'checkbox'" [label]="checkOptions+2" [control]="userName" name="checkboxs" value="2"></wf-form-checkbox>
            	<wf-form-checkbox [className]="'checkbox'" [label]="checkOptions+3" [control]="userName" name="checkboxs" value="3"></wf-form-checkbox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-checkbox [className]="'checkbox'" size="i-checks-sm" [label]="checkLabel+ '~Small size'" [control]="userName"></wf-form-checkbox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-checkbox [className]="'checkbox'" size="i-checks-lg" [label]="checkLabel+ '~Large size'" [control]="userName"></wf-form-checkbox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-radiobox [label]="radioLabel" [control]="userName" name="" value=""></wf-form-radiobox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-radiobox [label]="radioLabel+ '~checked'" [control]="userName" checked="checked" name="" value=""></wf-form-radiobox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-radiobox [label]="radioLabel+ '~disabled'" [control]="userName" disabled="disabled" name="" value=""></wf-form-radiobox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-radiobox [label]="radioLabel+ '~disabled and checked'" [control]="userName" disabled="disabled" checked="checked" name="" value=""></wf-form-radiobox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-radiobox [label]="radioLabel+'1'" [control]="userName" name="radios" value="1"></wf-form-radiobox>
                <wf-form-radiobox [label]="radioLabel+'2'" [control]="userName" name="radios" value="2"></wf-form-radiobox>
                <wf-form-radiobox [label]="radioLabel+'3'" [control]="userName" name="radios" value="2"></wf-form-radiobox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-radiobox size="i-checks-sm" [control]="userName" [label]="radioLabel+ '~Small size'" name="" value=""></wf-form-radiobox>
            </wf-form-block>
            <wf-form-block>
                <wf-form-radiobox size="i-checks-lg" [control]="userName" [label]="radioLabel+ '~Large size'" name="" value=""></wf-form-radiobox>
            </wf-form-block>
        </form>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading font-bold">wf-form-condensed</div>
    <div class="panel-body">
        <form [formGroup]="wfFormGroup" (ngSubmit)="onSubmit()" class="form-validation">
            <wf-form-condensed>
                <wf-form-inputbox [control]="userName" [label]="userLabel" [inputType]="inputType"></wf-form-inputbox>
                <wf-form-selectbox [control]="userName" [label]="selLabel" [options]="selectOp"></wf-form-selectbox>
                <wf-form-botton [button]="btnname" [btnicon]="btnicon" [disabled]="disabled"></wf-form-botton>
            </wf-form-condensed>
            <wf-form-condensed>
                <wf-form-textareabox [control]="userName" [label]="textareaLa" [rows]="wfrows" [cols]="wfcols" [placeholder]="pla"></wf-form-textareabox>
            </wf-form-condensed>
            <button-group-vertical>
                <wf-form-botton [button]="btnname" [btnicon]="btnicon" [class]="btnVertical" [classes]="classes"></wf-form-botton>
                <wf-form-botton [button]="btnname" [btnicon]="btnicon" [disabled]="disabled" [class]="btnVertical" ></wf-form-botton>
                <wf-form-botton [button]="btnname" [btnicon]="btnicon" [class]="btnVertical" ></wf-form-botton>
            </button-group-vertical>
        </form>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading font-bold">wf-form-Inline</div>
    <div class="panel-body">
        <form [formGroup]="wfFormGroup" (ngSubmit)="onSubmit()" class="form-validation">
            <wf-form-inputbox [placeholder]="'Enter email'" [col]="4" [control]="userName"></wf-form-inputbox>
            <wf-form-inputbox [placeholder]="'password'" [col]="4" [control]="userName" [inputType]="inputType"></wf-form-inputbox>
            <wf-form-checkbox [className]="'checkbox-inline'" size="i-checks-lg" [label]="'Remember me'" [control]="userName"></wf-form-checkbox>
            <wf-form-botton [button]="btnname" [btnicon]="btnicon" [disabled]="disabled"></wf-form-botton>
        </form>
    </div>
</div>
